<template>
  <div :class="clas1" id="body1">
      <!-- 添加 ref 以便在 JS 中操作 -->
      <div :class="f1" ref="movingDiv"></div>
  </div>
  <el-button type="primary" @click="changeStyle">动态样式</el-button>
  <el-button type="primary" @click="logout">退出登录</el-button>
  <el-button type="primary" @click="tohalo">tohalo</el-button>
  <el-button type="success" round @click="todoubaoChat">豆包聊天</el-button>
  <div v-text="message"></div>
  <div class="img">
      <div class="img1" v-for="(item, index) in imgs" :key="index">
          <img :src="item" alt="" v-if="index % 2 === 1">
      </div>
  </div>
  <div v-for="item in num" :key="item">{{ item }}</div>
  <div id="app">
      <button @click="count += Math.random()">随机数</button>
      <p>自动生成的随机数是{{ count }}</p>
  </div>
  <input type="text" @keyup.enter="clickenter">

</template>

<script setup>
// 从 vue-router 导入 useRouter
import { useRouter } from 'vue-router'
// 从 vue 核心库导入 ref、onMounted 和 onUnmounted
import { ref, onMounted, onUnmounted } from 'vue'
const a1Img = require('@/assets/a1.png')
const a2Img = require('@/assets/a2.png')
const a3Img = require('@/assets/a3.png')

let router = useRouter()
let count= 1
let num= '123456789'
let imgs= [
              a1Img, a2Img, a3Img
          ]
let message= 'test message'


  // setup  (()=>{
      const movingDiv = ref('#body1')
      let animationInterval = null

      const moveRandomly = () => {
          if (movingDiv.value && movingDiv.value.parentElement) {
              const parent = movingDiv.value.parentElement
              const parentRect = parent.getBoundingClientRect()
              const divRect = movingDiv.value.getBoundingClientRect()

              const maxX = parentRect.width - divRect.width
              const maxY = parentRect.height - divRect.height

              const randomX = Math.floor(Math.random() * maxX)
              const randomY = Math.floor(Math.random() * maxY)

              movingDiv.value.style.left = `${randomX}px`
              movingDiv.value.style.top = `${randomY}px`
          }
      }

      onMounted(() => {
          animationInterval = setInterval(moveRandomly, 1000)
      })

      onUnmounted(() => {
          clearInterval(animationInterval)
      })

// 
  let    clickenter=()=>{
          console.log('点了回车按键');
          
      }
      let  todoubaoChat=()=> {
          router.push('/doubaoChat')
      }
   let   tohalo=()=> {
          router.push('/HaloView')
      }
         let clas1= ''
         let f1= ''
    let  changeStyle=() =>{
          clas1 = 'clas1'
          f1 = 'f1'
          message = '现在正在显示动态样式'
      }
    let  logout=()=> {
          sessionStorage.setItem('showLogin', '1')
          router.push('/LoginDoubao')
      }
  //    let changeRB=()=> {
  //         myDiv.backgroundColor = 'red'
  //         myDiv.width = '1000'
  //         myDiv.height = '600'
  //         div2.backgroundColor = '#000'
  //         div2.width = '200'
  //         div2.height = '300'
  //         div2["border-radius"] = '200px'
  //     }


// export default {
//     name: 'DataBind',

//     data() {
//         return {
//             count: 1,
//             num: '123456789',
//             imgs: [
//                 a1Img, a2Img, a3Img
//             ],
//             message: 'test message',
//             clas1: '',
//             f1: '',
//             myDiv: {
//                 backgroundColor: 'green',
//                 width: '500px',
//                 height: '500px'
//             },
//             div2: {
//                 backgroundColor: 'red',
//                 width: '100px',
//                 height: '100px'
//             },
//             pink: 'pink',
//             width: '100%',
//             height: '200px'
//         }
//     },

//     computed: {
//         router() {
//             return useRouter()
//         }
//     },

//     setup() {
//         const movingDiv = ref(null)
//         let animationInterval = null

//         const moveRandomly = () => {
//             if (movingDiv.value && movingDiv.value.parentElement) {
//                 const parent = movingDiv.value.parentElement
//                 const parentRect = parent.getBoundingClientRect()
//                 const divRect = movingDiv.value.getBoundingClientRect()

//                 const maxX = parentRect.width - divRect.width
//                 const maxY = parentRect.height - divRect.height

//                 const randomX = Math.floor(Math.random() * maxX)
//                 const randomY = Math.floor(Math.random() * maxY)

//                 movingDiv.value.style.left = `${randomX}px`
//                 movingDiv.value.style.top = `${randomY}px`
//             }
//         }

//         onMounted(() => {
//             animationInterval = setInterval(moveRandomly, 1000)
//         })

//         onUnmounted(() => {
//             clearInterval(animationInterval)
//         })

//         return {
//             movingDiv
//         }
//     },

//     methods: {
//         clickenter(){
//             console.log('点了回车按键');
          
//         },
//         todoubaoChat() {
//             $router.push('/doubaoChat')
//         },
//         tohalo() {
//             $router.push('/HaloView')
//         },
//         changeStyle() {
//             clas1 = 'clas1'
//             f1 = 'f1'
//             message = '现在正在显示动态样式'
//         },
//         logout() {
//             sessionStorage.setItem('showLogin', '1')
//             $router.push('/LoginDoubao')
//         },
//         changeRB() {
//             myDiv.backgroundColor = 'red'
//             myDiv.width = '1000'
//             myDiv.height = '600'
//             div2.backgroundColor = '#000'
//             div2.width = '200'
//             div2.height = '300'
//             div2["border-radius"] = '200px'
//         },
//     }
// }
</script>

<style scoped>
.body1 {}

#body1 {}

.clas1 {
  position: relative;
  /* 确保子元素绝对定位相对于此元素 */
  background-color: green;
  width: 500px;
  height: 500px;
}

.f1 {
  position: absolute;
  /* 绝对定位以便移动 */
  background-color: red;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
}
</style>